<template>
  <div>
    <div class="planting">
      <div class="year">
        <p>{{ fieldName }}</p>
      </div>
      <div
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="10"
      >
        <ul v-if="plantingList.length > 0">
          <li
            v-for="(item, index) in plantingList"
            :key="index"
          >
            <div class="day"><span />{{ item.startDate }}</div>
            <div class="listInfo">
              <van-circle
                v-model="item.degree"
                :rate="item.degree"
                :stroke-width="80"
                layer-color="#DEDEDE"
                color="#FFA10B"
                :speed="100"
                :text="item.degree.toFixed(0) + '%'"
              />
              <div class="info">
                <div class="tit">{{ item.processName }}</div>
                <div class="people">
                  <p v-if="item.creatorName">创建人：{{ item.creatorName }}</p>
                  <p v-if="item.finishUsername">完成人：{{ item.finishUsername }}</p>
                </div>
              </div>
            </div>
            <div class="text">{{ item.remarks }}</div>
            <div class="imgList">
              <img
                v-for="(img, imgIndex) in item.images"
                :key="imgIndex"
                :src="img"
                alt=""
              >
            </div>
          </li>
        </ul>
        <van-empty v-else description="暂无数据..." style="margin: 0 auto" />

        <div v-if="!isMore && plantingList.length > 0" class="noMore">
          ~ 暂无更多 ~
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { http_farmland } from '@/api';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      plantingList: [],
      images: [
      ],
      isMore: true, // 下页是否有数据
      page: {
        pageSize: 10,
        page: 1
      },
      busy: false,
      fieldName: '',
      cropName: ''
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
    userId() {
      return this.userInfo.userId;
    }
  },
  mounted() {
    this.fieldId = this.$route.params.id
    http_farmland.read(this.fieldId).then(res => {
      this.fieldName = res.data.fieldName
      this.cropName = res.data.cropName
      // 获取田的种植计划
      this.getFieldListFn();
    })
  },
  methods: {
    loadMore() {
      if (this.plantingList.length > 0) {
        this.busy = true;
        const current = this.page.page;
        this.page.page = current + 1;
        this.getFieldListFn();
      }
    },
    // 获取田的相关种植计划
    async getFieldListFn() {
      const data = {
        fieldId: this.fieldId,
        userId: this.userId,
        pageSize: this.page.pageSize,
        page: this.page.page
      };
      const result = await http_farmland.plant_detail(data);
      if (result.code == 200) {
        const reslist = result.data;
        if (reslist.length > 0) {
          reslist.forEach((item) => {
            if (item.pics) {
              item.images = item.pics.split(',');
            }
          });
          this.plantingList = this.plantingList.concat(reslist);
          this.isMore = true;
          this.busy = false;
        } else {
          if (this.page.pageNum != 1) {
            this.isMore = false;
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.planting {
  padding-top: 51px;
  .year {
    width: 100%;
    height: 44px;
    border-bottom: 7px solid #f6f7f8;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: content-box;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 9;
    h6 {
      font-size: 16px;
      font-weight: bold;
      color: #434252;
    }
    p {
      font-size: 14px;
      font-weight: 400;
      color: #434252;
    }
  }
  ul {
    li {
      padding: 17px 15px 14px;
      border-bottom: 1px solid #e6e6e6;
      .day {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        color: #434252;
        span {
          width: 6px;
          height: 6px;
          background: #ffa10b;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .listInfo {
        margin-top: 9px;
        display: flex;
        align-items: center;
        .van-circle {
          width: 43px;
          height: 43px;
          ::v-deep .van-circle__text {
            font-size: 12px;
            font-weight: 400;
            color: #ffa10b;
          }
        }
        .info {
          margin-left: 28px;
          .tit {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
          }
          .people {
            display: flex;
            align-items: center;
            margin-top: 1px;
            p {
              font-size: 14px;
              font-weight: 500;
              color: #333333;
              margin-right: 35px;
            }
          }
        }
      }
      .text {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 18px;
        margin-top: 10px;
        padding-left: 24px;
      }
      .imgList {
        padding-left: 24px;
        display: flex;
        align-items: center;
        overflow-x: auto;
        margin-top: 7px;
        img {
          width: 281px;
          height: 176px;
          margin-right: 6px;
        }
        img:last-child {
          margin-right: 0;
        }
      }
    }
    li:first-child {
      padding-top: 7px;
    }
  }
}
</style>
